<template>
  <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit">
    <FormItem prop="email">
      <Input prefix="md-contact" v-model="form.email" placeholder="请输入用户名"/>
    </FormItem>
    <FormItem prop="password">
      <Input prefix="md-lock" autocomplete="new-password" type="password" v-model="form.password" placeholder="请输入密码"/>
    </FormItem>

    <FormItem prop="from">
      <div class = 'from'>
        <span class="from2">
          <input type="radio" id="g" value= '1' v-model="form.from">
          <label for="g" style="margin-right: 50px"> 品牌商 </label>

          <input type="radio" id="h" value= '2' v-model="form.from" style="margin-left: 50px">
          <label for="h"> 经销商 </label>
        </span>
      </div>
    </FormItem>

    <FormItem>
      <Button @click="handleSubmit" type="primary" size="large" long>登录</Button>
    </FormItem>
  </Form>
</template>

<script lang="ts">
  import {Component, Prop, Vue} from 'vue-property-decorator';
  import {mapActions, mapMutations, mapState} from 'vuex';
  class LoginModel {
    constructor(email: string, password: string, from: any) {
      this.email = email;
      this.password = password;
      this.from = from;
    }
    from : any = '';
    email: string = '';
    password: string = '';
  }

  @Component({
    components: {},
    computed: mapState([]),
    methods: {
      ...mapMutations([]),
      ...mapActions([''])
    }
  })
  export default class extends Vue {
    @Prop({
      type: Array,
      default: () => {
        return [
          {required: true, message: '账号不能为空', trigger: 'blur'}
        ];
      }
    })
    readonly emailRules!: Array<any>;

    @Prop({
      type: Array,
      default: () => {
        return [
          {required: true, message: '密码不能为空', trigger: 'blur'}
        ];
      }
    })
    readonly passwordRules!: Array<any>;

    @Prop({
       type: Array,
       default: () => {
          return [
            {required: true, message: '登录途径不能为空', trigger: 'blur'}
          ];
       }
    })
    readonly sourceRules!: Array<any>;

    form: LoginModel = new LoginModel('', '', '');

    $refs!: {
      loginForm: HTMLFormElement
    };

    created() {
    }

    mounted() {
    }

    updated() {
    }

    destroyed() {
    }

    get rules() {
      return {
        email: this.emailRules,
        password: this.passwordRules,
        from: this.sourceRules
      };
    }

    handleSubmit() {
      this.$refs.loginForm.validate((valid: boolean) => {
        if (valid) {
          this.$emit('on-success-valid', {
            email: this.form.email,
            password: this.form.password,
            from: this.form.from
          });
        }
      });
    }
  }
</script>
<style lang="less" scoped>
  .from{
    text-align:center;
  }
  .from2{
    display: inline-block;  width: 400px;height: 5px;
  }
</style>
